import React, { useEffect, useState } from "react";
import { List, Divider, Breadcrumb, Modal, message, Button } from "antd";
import "./ArticleList.css";
import axios from "axios";
import servicePath from "../../config/apiUrl";
import VirtualList from "rc-virtual-list";
import { EyeOutlined, LikeOutlined, CommentOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
const { confirm } = Modal;

const ArticleList = (props) => {
  console.log(props);
  const navigate = useNavigate();
  const ContainerHeight = 400;
  const [list, setList] = useState([]);
  useEffect(() => {
    getList();
  });

  const getList = () => {
    axios({
      method: "get",
      url: servicePath.getArticleList,
      withCredentials: true,
      header: { "Access-Control-Allow-Origin": "*" },
    }).then((res) => {
      setList(res.data.data);
    });
  };
  const onScroll = (e) => {
    if (e.target.scrollHeight - e.target.scrollTop === ContainerHeight) {
      //   appendData();
    }
  };
  //删除文章
  const delArticle = (id) => {
    confirm({
      title: "确定要删除这篇博客文章吗?",
      content: "如果你点击OK按钮，文章将会永远被删除，无法恢复。",
      onOk() {
        axios(servicePath.deleteArticle + id, {
          withCredentials: true,
        }).then((res) => {
          message.success("文章删除成功");
          setList(list);
        });
      },
      onCancel() {
        message.success("没有任何改变");
      },
    });
  };
  //编辑文章
  const editArtcile = (id, checked) => {
    navigate("/admin/addArticle/" + id);
  };
  return (
    <>
      <div className="header">文章列表</div>
      <Divider />
      <List>
        <VirtualList
          data={list}
          height={ContainerHeight}
          itemHeight={47}
          itemKey="email"
          onScroll={onScroll}
        >
          {(item) => (
            <List.Item
              actions={[
                <Button
                  onClick={() => {
                    editArtcile(item.id);
                  }}
                >
                  编辑
                </Button>,
                <Button
                  onClick={() => {
                    delArticle(item.id);
                  }}
                >
                  删除
                </Button>,
              ]}
            >
              <List.Item.Meta
                title={item.title}
                description={
                  <Breadcrumb separator="|">
                    <Breadcrumb.Item>{item.addTime}</Breadcrumb.Item>
                    <Breadcrumb.Item>
                      <EyeOutlined />
                      {item.view_count}
                    </Breadcrumb.Item>

                    <Breadcrumb.Item>
                      <LikeOutlined />
                      点赞数
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                      <CommentOutlined />
                      评论数
                    </Breadcrumb.Item>
                  </Breadcrumb>
                }
              ></List.Item.Meta>
            </List.Item>
          )}
        </VirtualList>
      </List>
    </>
  );
};

export default ArticleList;
